<template>
    <view class="pageWrap">
        <view class="select">
            <uni-data-select
                v-model="selectVls"
                :clear="false"
                :localdata="range"
                @change="change"
            ></uni-data-select>
        </view>
        <view class="details" v-for="(item,idx) in list" :key="idx">
            <view class="topWrap">
                <view class="conetnt">{{ item.title }}</view>
                <view class="money">{{ item.money }}</view>
            </view>
            <view class="topWrap">
                <view class="time">{{ item.time }}</view>
                <view class="time">{{ item.type }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return{
                selectVls:1,
                range: [
                    { value: 0, text: "近3个月" },
                    { value: 1, text: "近6个月" },
                    { value: 2, text: "近一年" },
                ],
                list:[
                    {
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'支付宝提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'支付宝提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    },{
                        title:'微信提现',
                        money:'-0.01',
                        time:'2021-03-12',
                        type:'交易成功'
                    }
                ]
            }
        },
        methods: {
            change(e) {
                console.log("e:", e);
                this.selectVls = e
            },
        },
    }
</script>

<style lang="scss" scoped>
.select{
    width: 200rpx;
}
.details{
    margin-top: 30rpx;
    background-color: #fff;
    border-radius: 8rpx;
    padding: 30rpx;
    .topWrap{
        display: flex;
        justify-content: space-between;
        .conetnt{
            font-size: 30rpx;
            font-weight: 500;
            color: #333333;
        }
        .money{
            font-size: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #FF3838;
        }
        .time{
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #999999;
        }
    }
}
.pageWrap{
    padding: 30rpx;
}
</style>
<style>
page{
    background-color: #f5f5f5;
}
</style>